<template>
  <div class="leaderboard-container">
    <div class="card-header-container">
      <span class="title">收藏歌单</span>
      <div class="sub-container1" @click="toBack()">
        <i class="iconfont icon-arrow-left-1"></i>返回
      </div>
    </div>
    <div class="sub-container">
      <div class="leaderboard-item-container">
        <div class="list">
          <div
            class="leaderboard-music-container"
            style="align-items: flex-start"
          >
            <div class="cover-wrap1">
              <img class="cover" alt="" :src="data.playlist.coverImgUrl" />
            </div>
            <div class="info">
              <div class="song-name" style="padding-left: 20rem">
                {{ data.playlist.name }}
              </div>
              <div
                class="song-singer"
                style="
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  padding-left: 20rem;
                  line-clamp: 6;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: #2f2f2f;
                "
              >
                {{ data.playlist.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sub-container" style="padding-bottom: 300rem">
      <div class="leaderboard-item-container">
        <div class="list">
          <div
            class="leaderboard-music-container"
            v-for="(item, index) in data.songList"
            :key="index"
            @click="playMusic(item)"
          >
            <div class="cover-wrap">
              <img class="cover" :src="item.al.picUrl" alt="" />
            </div>
            <div class="info">
              <div class="song-name m-lr-24">{{ item.name }}</div>
              <div class="song-singer m-lr-24">{{ item.ar[0].name }}</div>
            </div>
            <div><i class="iconfont icon-zanting1 play"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSongDetail, getPlayListDetail } from "../../api/likesonglist";
import { getSongUrl,getLyric } from '../../api/play';
import { useStore } from "vuex";

export default defineComponent({
  name: "Playlist",
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const playlistId = route.params.id;
    const data = reactive({
      playlist: {},
      songList: [],
    });
    onMounted(async () => {
      const res = await getPlayListDetail(playlistId);
      const playlist = res.data.playlist;
      data.playlist = playlist;
      playlist.trackIds.forEach(async (song: any) => {
        const res = await getSongDetail(song.id);
        const url = await getSongUrl(song.id)
        const lyric = await getLyric(song.id)
        const songInfo = res.data.songs[0]
        songInfo.url = url.data.data[0].url
        songInfo.lyric = lyric.data.lrc.lyric
        data.songList.push(songInfo);
      });
    });
    const toBack = () => {
      router.back();
    };
    const playMusic = (obj: any) => {
      store.commit("setPlayMusic", obj);
    };
    return {
      data,
      toBack,
      playMusic,
    };
  },
});
</script>

<style scoped>
.card-header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 24rem 32rem;
}

.title {
  font-size: 34rem;
  font-weight: bold;
}

.leaderboard-container {
  background-color: var(--light-color);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.sub-container {
  padding: 0 24rem 24rem;
}

.leaderboard-item-container {
  padding: 32rem;
  box-shadow: 2rem -2rem 12rem rgba(0, 0, 0, 0.1);
  border-radius: 12rem;
}

.list {
  margin-top: 32rem;
}

.item:not(:last-child) {
  margin-bottom: 24rem;
}

.leaderboard-music-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rem;
}

.cover-wrap {
  width: 100rem;
  height: 100rem;
  font-size: 0;
  border-radius: 12rem;
  overflow: hidden;
}

.cover-wrap1 {
  width: 200rem;
  height: 200rem;
  font-size: 0;
  border-radius: 12rem;
  overflow: hidden;
}

.cover {
  width: 100%;
  height: 100%;
}

.info {
  flex: 1;
  font-size: 28rem;
}

.song-name {
  font-weight: bold;
  padding-bottom: 2rem;
}

.song-singer {
  font-size: 24rem;
  color: var(--three-level);
  padding-top: 2rem;
}

.leaderboard-music-container .icon-new {
  font-size: 40rem;
  color: #0da76a;
}

.play {
  font-size: 50rem;
  color: var(--senond-font-color);
}

.sub-container1 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40rem;
  padding: 3rem 16rem 0;
  border: 0.5px solid var(--four-level);
  border-radius: 32rem;
  font-size: 24rem;
}

.sub-container1 .iconfont {
  font-size: 24rem;
  margin-top: -3rem;
}
</style>
